<template>
	<view>
		<!-- 商家信息 -->
		
		  <view class=" cf bg-white">
			  <view class=" fr ">
			    <view style="font-size:24upx;line-height:50upx">{{detailInfo.idDetails.school}}</view>
			  </view>
		    <view class="fl ">
		      <image v-if="detailInfo.head" :src="detailInfo.head"></image>
			  <image v-else src='../../static/myIcon/head.png'></image>
		      <view class="fr padding-name">
		        <view>{{detailInfo.username}}</view>
		        <view>
		          <text>发布于{{detailInfo.idDetails.createTime}}</text>
		        </view>
		      </view>
		    </view>
			
		  </view>
		
		<!-- 商家信息end -->
		
		<!-- 商品内容 -->
		<view class='contanier bg-white padding-sm top-20' >
		  <view class='price'>
		    <text class='price-symbol'>￥</text>
		    <text class='price-size'>{{detailInfo.idDetails.price}}</text>
		    <text class='price-ori'>￥{{detailInfo.idDetails.oprice}}</text>
		  </view>
		<view class="label" v-if="detailInfo.idDetails.attribute">
			<text  class="title-parttime" v-for="(labelItem, labelIndex) in detailInfo.idDetails.attribute.split(',')">{{labelItem}}</text>
		</view>
		  <view class='bg-white top-20 font-size'>
		    <text>
					{{detailInfo.idDetails.msg}}
		</text>
		  </view>
		
		  <!-- 交易方式 -->
		  <view class='hint'>
		    <text>本交易仅支持当面交易</text>
		  </view>
		  <!-- end -->
		
		  <!-- 图片位置 -->
		  <block v-for="(item,index) in detailInfo.idDetails.imgpaths.split(',')" :key="index">
		    <image class='img' :src='item'></image>
		  </block>
		  </view>
		  <!--图片位置end  -->
			
<!-- 		
		  <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" class='top-20'>
		    <block v-for="(item,index) in 10" :key="index">
		      <view class='item-inline'>
		        <navigator url='' hover-class='none'>
		          <view class="item-inline bg-img padding-top-xl flex align-end" :style=" 'background-image: url(' + url + ');' ">
		            <view class="bg-shadeBottom  padding-top-xl flex-sub">
		              ￥200
		            </view>
		          </view>
		        </navigator>
		      </view>
		    </block>
		
		  </scroll-view>
		</view> -->
		
		<!-- end
		
		<!-- 更多闲置 -->
		<view class='bg-white contanier  '>
		
		
		   <view class='in_regard_to'>
		    <view>
		      <!-- <image src='../img/tiao.png'></image> -->
		    </view>
		    <view>
		      <text class='in_regard_to_text'>更多闲置</text>
		    </view>
		  </view>
		
		
		<!-- 内容 -->
		<view class='container-flex '>
		<view class='card-menu container margin-top' v-for="(item,index) in idleList" :key="index">
		    <view  @click="demo1(item.id)">
		  <view class='container_img'><image :src="item.imgpaths.split(',')[0]"></image></view>
		  <view class='container_text'><text class=''>{{item.msg}}</text></view>
		  <view class='container_price'>
		  <text class='container_price_text_0'>￥{{item.price}}</text>
		  <!-- <text class='container_price_text_1'>11人想要</text> -->
		   
		  </view>
		  </view>
		</view>
		</view>
		<!-- 内容end -->
		
		
		</view>
		
		<!-- end -->
		
		
		<!-- 操作选项卡 -->
		<button class="submitBtn" @click="submit" >联系卖家</button>
		<!-- end -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  url:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
				  id:"",
				  detailInfo:{},
				  idleList:[]
			};
		},
		onLoad(e) {
			this.id=e.id;
			this.getDetail();
			this.getMore();
		},
		methods: {
			// 点击跳转订单详细页面
			async getDetail(){
				var parm={
					id:this.id
				}
				
				 let res=await this.$apis.idDetails(parm);
				 this.detailInfo=res;
				console.log(res);
			},
			async getMore(){
				var query={
					current:1,
					number:6
				}
				let data=await this.$apis.getIdleList(query);
				this.idleList=data;
			},
			demo1(id){
				uni.redirectTo({
					url:"/pages/idleSquare/idledetail?id="+id
				})
				
			}
		}
	}
</script>

<style lang="scss">
/* 商家信息 */
.fl{
	
	display: flex;
}
.cf{
	padding:20upx 20upx;
	width:85%;
	margin:10upx auto;
	border-radius: 6upx;
}
.contanier{
	padding:20upx;
	margin:10upx auto;
	width:85%;
	border-radius: 6upx;
}
.padding-name{
  padding-left: 20rpx;
}
.padding-name text{
  color: gray;
  font-size: 20rpx;
}
.fl image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 100%;
}
.padding-time{
  padding-top: 45rpx;
}
text-title-size{
  font-size: 50rpx;
  color: gray;
}
/* 商家信息end */

/* 商品内容 */
.top-20{
margin-top: 20rpx;
}

.price-size{
  font-size: 50rpx;
  color: red;
}
.price-symbol{
  font-size: 20rpx;
  color: red;
}
.price-ori{
  margin-left: 25rpx;
  text-decoration: line-through;
}
.font-size text{
  font-size: 35rpx;
  color: black;
}
.hint{
  margin-top: 20rpx;
  color: black;
  font-size: 35rpx;
}
.img{
  margin-top: 10rpx;
  width: 100%;
  height: 800rpx;
}
.cu-tag{
  margin-left: 20rpx;
  /* padding: 0rpx; */
  font-size: 22rpx;
}
.browse{
  display: flex;
  justify-content: space-between;
}
.browse-tiem{
  font-size: 23rpx;
  color: gray;
}
.padding-browse{
  padding: 10rpx;
}
/* 商品内容end */

/* 商家信息 */
.in_regard_to{
  display: flex;
  align-items: center;
}
.in_regard_to image{
  width: 50rpx;
  height: 65rpx;
}
.in_regard_to_text{
  font-size: 35rpx;
  color: black;
  font-family: inherit;
}
.top-30{
  margin-top: 30rpx;
  
}
.Business_information{
  /* width: 30%; */
  padding: 5rpx;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

}
.information{
  /* border-top-left-radius: 5%;
  border-top-right-radius: 5%; */
  border-radius: 20rpx;
  padding: 10rpx;
  display: flex;
  justify-content: space-around;
}
.item-inline{
display: inline-block;
margin-right: 10rpx;
height: 150rpx;
width: 230rpx;
}

/* end */

/* 消息 */
.msg{
  display: flex;
}
.msg-conetent{
  margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 10rpx;
    width: 80%;
}
.msg-timer{
 padding-left: 20rpx;
}
.msg-timers{
  color: gray;
  font-size: 22rpx;
}
/* end */



/* 相似商品 */
.container{
  margin-left: 10rpx;
  /* float: left; */
  height: 460rpx;
  width: 46%;
  background: white;
  margin-bottom: 20rpx;
  
}
.container_img image{
  height: 300rpx;
  width: 100%;
}
.container_text{
  color: black;
  padding: 10rpx;
  font-size: 23rpx;
}
.container_price{
  display: flex;
  justify-content: space-between;
  padding-left: 8rpx;
  padding-right: 8rpx;
}
.container_price_text_0{
  color: red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container_price_text_1{
  font-size: 22rpx;
}
.container_line{
  width: 100%;
  background: gainsboro;
  height: 1rpx;
  margin-top: 10rpx;
}
.container_user{
  margin-top: 20rpx;
  display: flex;
  line-height:50rpx;
}
.container_user image{
  margin-left: 10rpx;
  margin-right: 50rpx;
  height: 50rpx;
  width: 50rpx;
}
.container-flex{
  display: flex;
  flex-wrap: wrap;
}
/* end */
.submitBtn{
	margin: 20upx 4% 20upx 4%;
	width:92%;
	height:80upx;
	line-height: 80upx;
	color:white;
	border-radius: 35upx;
	background-color: #5FDB7E;
}
.label{
	height:40upx;
	width:100%;
	margin-top:8upx;
	.title-parttime{
		color: #66666E;
		border: 1upx solid #36B957;
		background-color: #F5FFE6;
		font-size: $uni-font-size-sm;
		margin-right: 15upx;
		padding: 4upx 15upx;
		border-radius: 6upx;
		line-height: 40upx;
		float: left;
	}
}
</style>
